<template>
  <div>
    <div class="query">
      <el-form :inline="true"  label-width="100px">
        <el-form-item label="订单时间">
          <el-date-picker
            v-model="data_value1"
            type="daterange"
            range-separator="——"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="spec" placeholder="规格"></el-input>
        </el-form-item>
        <br/>
        <el-form-item v-if="radio == '1' ? true : false" label="配送时间">
          <el-date-picker
            v-model="data_value2"
            type="daterange"
            range-separator="——"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label=" ">
          <el-radio-group  v-model="radio" @change="updataButton">
            <el-radio label="0">未配送</el-radio>
            <el-radio label="1">已配送</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="  ">
          <el-button style="width : 120px" type="primary" @click="onQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body1">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; max-height: 700px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selectionb" width="10"> </el-table-column>
        <el-table-column  width="150px" label="日期" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column prop="departParentId" label="医院" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="orderNo" label="采购单编号" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="orderNum" label="采购数量" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="name" label="生产厂家" show-overflow-tooltip></el-table-column>
        <el-table-column prop="produceName" label="产品名称" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="spec" label="规格" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="version" label="型号" show-overflow-tooltip> </el-table-column>
        <el-table-column v-if="radio == '1' ? true : false" prop="deliveryDate" label="配送时间" width="150px"> </el-table-column>
        <el-table-column prop="status" label="配送状态" show-overflow-tooltip> </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="updataStatus(scope.$index, scope.row)">{{
              distributionName
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'ProductNumber',
  data() {
    // 0未配送，1已经配送
    return {
      distributionName: '配送',
      radio: '0',
      data_value1: [],
      data_value2: [],
      tableData: [],
      datas: [],
      multipleSelection: [],
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      select_value: '',
      multipleSelection: [],
      spec : '',
      name: ''
    }
  },
  methods: {
    /**全选 */
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    onQuery() {
      let that = this
      //做数据查询
      var url = '/pd-purchase-detail/get_produce_relation'
      getAction(url, {
        startDate: this.data_value1 == null ? '' : this.data_value1[0],
        endDate: this.data_value1 == null ? '' : this.data_value1[1],
        status: this.radio,
        spec: this.spec,
        name: this.name,
        dis_start_date:this.data_value2 == null ? '' : this.data_value2[0],
        dis_end_date :this.data_value2 == null ? '' : this.data_value2[1],
      })
        .then((res) => {
          console.log(res.results)
          this.tableData = null
          this.tableData = res.result
        })
        .catch((err) => {
          that.$message.error('请求异常：' + err)
        })
    },
    updataStatus(index, row) {
      // console.log(index, row);
      var url = '/pd-purchase-detail/updata_order_form'
      getAction(url, {
        orderFormId: row['id'],
        status: this.radio == '0' ? '1' : '0',
      })
        .then((res) => {
          if (res.success == true) {
            this.$notification.success({
              message: '配送成功',
              description: `配送成功`,
            })
            this.onQuery()
          }
        })
        .catch((err) => {
          this.$notification.success({
            message: '配送失败',
            description: `配送失败`,
          })
        })
    },
    updataButton() {
      console.log('进来哦了')
      if (this.radio == 0) {
        this.distributionName = '配送'
      } else {
        this.distributionName = '取消配送'
      }
      this.onQuery()
    },
  },
  created() {
    this.onQuery()
  },
}
</script>

<style lang="less" scoped>
* {
  margin: 0 auto;
}

.query {
  //   height: 30%;
  // min-width: 60px;
  // margin: 0;
}
.query_form {
  // padding: 10px;
}
.body1 {
  height: 70%;
  max-height: 80px;
  margin-top: 1.5%;
}
.el-form > .el-form-item {
  padding: 5px;
}
</style>